<template>
  <div class="chart-list" @mousemove="handleMove" @mouseout="handleOut">
    <div class="list" :style="{ left }">
      <div
        class="item"
        v-for="l in 8"
        :key="`chart-list-item${l}`"
        ref="itemRef"
      >
        <sub-box :title2="`${l}号管`">
          <div class="main">
            <echart :option="option"></echart>
          </div>
        </sub-box>
      </div>
    </div>
    <!-- 指示器 -->
    <indicatorl
      :currIndexChange="1"
      :anime="anime"
      :isStop="isStop"
    ></indicatorl>
  </div>
</template>
<script>
import subBox from "../subBox.vue";
import echart from "@/components/echart/index.vue";
import opt from "./opt";
import indicatorl from "./indicatorl.vue";

export default {
  components: {
    subBox,
    echart,
    indicatorl,
  },
  data() {
    return {
      left: "0px",
      option: opt,
      isStop: false,
    };
  },
  watch: {
    currIndex: {
      handler(v) {
        this.anime(v);
      },
      immediate: true,
    },
  },
  methods: {
    handleMove() {
      this.isStop = true;
      // console.log("是否停止轮播", this.isStop);
    },
    handleOut() {
      this.isStop = false;
      // console.log("是否停止轮播", this.isStop);
    },
    getMock() {
      const a = [];
      for (let i = 0; i < 7; i++) {
        for (let j = 0; j < 4; j++) {
          const v = Math.floor(Math.random() * (5000 - 4500 + 1)) + 4500;
          a.push(v);
        }
      }
      return a;
    },
    getAxisLabel() {
      const a = [];
      for (let i = 0; i < 7; i++) {
        for (let j = 0; j < 4; j++) {
          a.push(`${j + 1}截面`);
        }
      }
      return a;
    },
    init() {
      this.option.series[0].data = this.getMock();
      this.option.series[1].data = this.getMock();
      this.option.series[2].data = this.getMock();
      this.option.series[3].data = this.getMock();
      this.option.xAxis[0].data = this.getAxisLabel();
      // getAxisLabel
    },

    anime(index) {
      // 处理边界情况
      if (index == 8) index = 6;
      else if (index >= 2) index--;
      index--;

      this.$nextTick(() => {
        const itemRef = this.$refs.itemRef[1];
        const width = itemRef.offsetWidth;
        const style = window.getComputedStyle(itemRef);
        const marginLeft = parseFloat(style.getPropertyValue("margin-left"));
        const len = width + marginLeft;
        this.left = -len * index + "px";
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang='scss'>
.chart-list {
  width: vw(1859px);
  height: vh(357px);
  margin-top: vh(20px);
  position: relative;
  .list {
    display: flex;
    position: absolute;
    transition: all 0.6s ease-out;

    .item {
      flex-shrink: 0; //防止压缩
      width: vw(606px);
      height: vh(337px);
      border: 1px solid rgba(66, 167, 182, 0.5);
      padding: vh(19px) vw(20px);
      box-sizing: border-box;

      &:not(:nth-child(1)) {
        margin-left: vw(20px);
      }
      .main {
        height: vh(306px);
        margin-top: vh(-40px);
      }
    }
  }
}
</style>
